<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="800px"
    append-to-body
    :close="handleClose"
  >
    <el-descriptions class="margin-top" border :column="2" :size="size" label-class-name="labelClass" content-class-name="contentClass">
      <el-descriptions-item label="执行时间" :span="2">{{ formData.val }}</el-descriptions-item>
      <el-descriptions-item label="行进方向">{{ getDirection() }}</el-descriptions-item>
      <el-descriptions-item label="当前状态"><el-tag size="small" :type="getStatus('type')">{{ getStatus('name') }}</el-tag></el-descriptions-item>
    </el-descriptions>
    <div class="h12" />
    <el-table
      border
      :data="tableData"
      :height="600"
      stripe
      style="width: 100%"
    >
      <el-table-column
        align="center"
        prop="date"
        label="分区"
      >
        <template #default="{row}">
          {{ row.lc + '-' + row.sc }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="v"
        label="速率(%)"
      >
        <template #default="{row}">
          {{ getV(row) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="p"
        label="周期(s)"
      />
      <el-table-column
        align="center"
        prop="d"
        label="占空比(%)"
      />
      <el-table-column
        align="center"
        prop="endGun"
        label="尾枪"
      >
        <template #default="{row}">
          <el-tag v-if="+row.endGun" type="success">打开</el-tag>
          <el-tag v-else type="danger">关闭</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      dialogVisible: false,
      formData: {},
      tableData: [],
      size: 'medium'
    }
  },
  methods: {
    show(row) {
      this.dialogVisible = true
      this.formData = row
      this.tableData = JSON.parse(row.devices[0].options).cells
      this.title = row.name
    },
    handleClose() {
      this.formData = {}
      this.tableData = []
      this.title = ''
    },
    getDirection() {
      if (this.formData.devices) {
        const device = this.formData.devices[0]
        if (device.actionStart.indexOf('REG_CMD_FWD') > -1) {
          return '正向'
        } else {
          return '反向'
        }
      }
      return ''
    },
    getStatus(field) {
      if (this.formData.status) {
        const status = this.formData.status
        const map = {
          0: { name: '待执行', type: 'info' },
          1: { name: '待执行', type: 'info' },
          2: { name: '执行中', type: 'primary' },
          3: { name: '已完成', type: 'success' },
          4: { name: '已取消', type: 'danger' }
        }
        return map[status][field]
      }
      return { name: '待执行', type: 'info' }[field]
    },
    getV(row) {
      let v = row.v
      if (v > 100) {
        v = 100
      }
      if (v < 0) {
        v = 0
      }
      return v
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
